<template>
	<view class="pages-box rel">
		<fixed>
			<view class="fill-base flex-y-center pl-md">
				<view class="flex-center" style="width: 140rpx;" @tap="changeShowNameType">
					<text>{{nameType[param.is_add].label}}</text>
					<i class="iconfont icon-down ml-sm" style="font-size: 8px;"></i>
				</view>
				<search class="flex-1" @input="toSearch" :keyword="param.quota_code" type="input" :padding="20" height="80rpx" :radius="80" backgroundColor="transparent"
					placeholder="请输入流水号">
				</search>
			</view>
			<view class="fill-base pl-md pr-md pt-md b-1px-t">
				<view class="flex-center">
					<!-- <view class="flex-1 flex-center pl-md pr-md mb-md mr-md" style="border: none;" @tap="this.showType = true">
						<text>{{typeList[param.type].label}}</text>
						<i class="iconfont icon-down ml-sm" style="font-size: 8px;"></i>
					</view> -->
					<view class="time-item flex-1 flex-center pl-md pr-md mb-md" @tap.stop="toCheckItem(index, 'date')" 
					:style="{backgroundColor: chooseInd == index ? primaryColor: '', borderColor: chooseInd == index ? primaryColor : '#ddd',color: chooseInd == index ? '#fff' : '#778498'}"
					v-for="(item,index) in dateList" :key="index" :class="[{'ml-md': index > 0}]">{{item.name}}</view>
				</view>
				<view class="flex-center pb-lg pt-lg" style="width: 100%;" v-if="chooseInd == 3">
					<view @tap.stop="toShowTime('start_time')" class="item-child flex-center flex-column flex-1">
						<view>开始时间</view>
						<view class="mt-sm" :style="{color:check_time.start_time ? primaryColor : '#999'}">
							{{check_time.start_time || '选择时间'}}
						</view>
					</view>
					<view @tap.stop="toShowTime('end_time')" class="item-child flex-center flex-column flex-1  b-1px-l">
						<view>结束时间</view>
						<view class="mt-sm" :style="{color:check_time.end_time ? primaryColor : '#999'}">
							{{check_time.end_time || '选择时间'}}
						</view>
					</view>
				</view>
			</view>
		</fixed>
		<view class="space-lg"></view>
		<view v-if="chooseInd == 3" style="height: 154rpx;"></view>
		<view class="mb-md fill-base radius-16 ml-lg mr-lg pd-lg" v-for="(item,index) in list.data" :key="index">
			<view class="f-desc">
				<text class="c-paragraph">流水号：</text>
				<text class="f-desc">{{item.quota_code}}</text>
			</view>
			<view class="f-desc">
				<text class="c-paragraph">时间：</text>
				<text class="f-desc">{{$util.formatTime(item.create_time*1000, '')}}</text>
			</view>
			<view class="f-desc">
				<text class="c-paragraph">变动金额：</text>
				<text class="f-desc c-warning">{{ (item.is_add == 1 ? '+' : '-') + ' ￥' + item.change}}</text>
			</view>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading"
			v-if="loading">
		</load-more>
		<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
		
		<w-picker mode="selector" :options="nameType" :themeColor="primaryColor"
			:visible.sync="showNameType" @confirm="selectConfirm($event , 'is_add')">
		</w-picker>
		<w-picker mode="date" :startYear="startYear*1-10" :endYear="startYear"
			:value="curDay" :current="false" fields="day"
			@confirm="onConfirm($event)" :disabled-after="false" ref="day" :themeColor="primaryColor"
			:visible.sync="showDate">
		</w-picker>
		<view class="space-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	let timer = null
	export default {
		data() {
			return {
				isLoad: false,
				loading: true,
				list: {
					data: []
				},
				param: {
					page: 1,
					// name_type: 0,//搜索类型 1服务名称 2订单编号 3服务地址
					quota_code: '',
					is_add: 0,//类型 1增加 2减少
					start_time: '',
					end_time: ''
				},
				nameType: [
					{label:'全部',value:0},
					{label:'增加',value:1},
					{label:'消耗',value:2}
				],
				dateList: [
					{name: '今日', id: 0, start_time: 0,end_time: 0},
					{name: '昨日', id: 1, start_time: 0,end_time: 0},
					{name: '近7天', id: 2, start_time: 0,end_time: 0},
					//{name: '近30日', id: 2, start_time: 0,end_time: 0},
					{name: '自定义', id: 3}
				],
				payModel: {
					1: '微信支付'
				},
				showNameType: false,
				showDate: false,
				showType: false,
				chooseInd: -1,
				check_time: {
					start_time: '',
					end_time: ''
				},
				curDay: '',
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo
		}),
		async onLoad(options) {
			this.$util.showLoading()
			let cur_time = new Date(Math.ceil(new Date().getTime()))
			this.curDay = this.$util.formatTime(cur_time, 'YY-M-D')
			this.startYear = this.$util.formatTime(cur_time, 'YY')
			let today = this.$util.formatTime(cur_time, 'YY-M-D') + ' 23:59:59'
			let one = 3600 * 24 * 1000
			let time = this.$util.DateToUnix(today) * 1000
			
			var yesterday = new Date(); // 通过复制今天的日期创建一个新的日期对象
			yesterday.setDate(new Date().getDate() - 1); // 将新日期对象的日期减去一天
			var yyyy = yesterday.getFullYear(); // 获取年份
			var mm = yesterday.getMonth() + 1; // 获取月份（注意月份是从0开始计数的，因此要加1）
			var dd = yesterday.getDate(); // 获取日期
			
			this.dateList[0].start_time = this.$util.DateToUnix(this.$util.formatTime(cur_time, 'YY-M-D')) 
			this.dateList[0].end_time = this.$util.DateToUnix(today)
			this.dateList[1].start_time = this.$util.DateToUnix(`${yyyy}-${mm}-${dd} 00:00:00`)
			this.dateList[1].end_time = this.$util.DateToUnix(`${yyyy}-${mm}-${dd} 23:59:59`)
			this.dateList[2].start_time = this.$util.DateToUnix(this.$util.formatTime(time - 6 * one, 'YY-M-D')) 
			this.dateList[2].end_time = this.$util.DateToUnix(today)
			//this.dateList[2].start_time = this.$util.DateToUnix(this.$util.formatTime(time - 29 * one, 'YY-M-D')) 
			//this.dateList[2].end_time = this.$util.DateToUnix(today)
			this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		async onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.$util.showLoading()
			this.param.page += 1
			await this.getList() 
		},
		methods: {
			...mapActions(['getConfigInfo']),
			...mapMutations(['updatePoolItem', 'updateHomeItem']),
			async initIndex(refresh = false){
				if(!this.configInfo.id || refresh){
					await this.getConfigInfo()
				}
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
				this.getList()
			},
			changeShowNameType(){
				this.showNameType = true
			},
			toSearch(name){
				clearTimeout(timer)
				timer = setTimeout(()=>{
					this.param.quota_code = name
					this.$util.showLoading()
					this.getList()
				},1000)
			},
			async initRefresh(){
				this.$util.showLoading()
				this.param.page = 1
				this.initIndex(true)
			},
			async getList(page = 0){
				if(page){
					this.param.page = page
				}
				let {
					param,
					list: oldList
				} = this
				let newList = await this.$api.user.quotaWater(this.param)
				if (param.page == 1) {
					this.list = newList;
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList;
				}
				this.isLoad = true
				this.loading = false
				this.$util.hideAll()
			},
			async submit(id){},
			selectConfirm(e, type){
				this.param[type] = e.value
				this.$util.showLoading()
				this.getList(1)
			},
			async toCheckItem(val , type){
				if(this.chooseInd == val) return
				this.chooseInd = val
				let {
					start_time = 0,
					end_time = 0
				} = this.dateList[val]
				if(this.check_time.start_time && this.check_time.end_time && val == 3){
					this.param.start_time = this.$util.DateToUnix(this.check_time.start_time + ' 00:00:00')
					this.param.end_time = this.$util.DateToUnix(this.check_time.end_time + ' 23:59:59')
					this.$util.showLoading()
					this.getList()
					return
				}
				if(val != 3){
					this.$util.showLoading()
					this.param.start_time = start_time
					this.param.end_time = end_time
					await this.getList(1)
				}
				this.param.start_time = ''
				this.param.end_time = ''
				this.check_time.start_time = ''
				this.check_time.end_time = ''
			},
			toShowTime(key) {
				if (key == 'end_time' && !this.check_time.start_time) {
					this.$util.showToast({
						title: `请选择开始时间`
					})
					return
				}
				let showTime = this.check_time[key]
				if (showTime) {
					this.curDay = showTime
				}
				
				this.showKey = key
				this.showDate = true
			},
			async onConfirm(val) {
				let {
					start_time,
					end_time
				} = this.check_time
				let {
					showKey
				} = this
				let show_unit = this.$util.DateToUnix(showKey == 'month' ? `${val.result}-01` : val.result)
				let start_unit = start_time ? this.$util.DateToUnix(start_time) : 0
				let end_unit = end_time ? this.$util.DateToUnix(end_time) : 0
				let cur_month = this.$util.formatTime(new Date(Math.ceil(new Date().getTime())), 'YY-M-D')
				let cur_unit = this.$util.DateToUnix(cur_month) + 1
			
				let msgType = {
					month: '开始月份',
					start_time: '开始时间',
					end_time: '结束时间',
				}
			
				if (show_unit > cur_unit) {
					this.$util.showToast({
						title: `${msgType[showKey]}不能选择未来时间哦`
					})
					return
				}
			
				if (((showKey == 'start_time' && end_unit && end_unit < this.$util.DateToUnix(val
							.result)) ||
						(showKey == 'end_time' && start_unit && start_unit > this.$util.DateToUnix(val.result)))) {
					this.$util.showToast({
						title: `结束时间不能小于开始时间`
					})
					return
				}
				console.log(val)
				this.check_time[showKey] = val.result
				// if(showKey == 'end_time'){
				// 	this.chooseInd = -1
				// }
				if(this.check_time.start_time && this.check_time.end_time){
					this.param.start_time = this.$util.DateToUnix(this.check_time.start_time + ' 00:00:00')
					this.param.end_time = this.$util.DateToUnix(this.check_time.end_time + ' 23:59:59')
					this.$util.showLoading()
					this.getList()
				}
			},
		},
	}
</script>


<style lang="scss">
	.pages-box {
		.time-item{
			height: 60rpx;
			border-radius: 60rpx;
			color: #778498;
			border: 1px solid #DDDDDD;
		}
		.type-img{
			height: 160rpx;
			width: 160rpx;
		}
	}
	
</style>
